import React, { useState, useEffect } from 'react';
import { Link, useDispatch, useSelector } from 'umi';
import { Table, Tag, Space, Button, Input, Select } from 'antd';
import { getGoods } from '../../../apis/goods/goods';
import AddGoodsType from '../../../components/AddGoodsType';
import ChangeGoods from '../../../components/ChangeGoods';
export default function goodstype() {
  //新增模态框
  const [isModalVisible, setIsModalVisible] = useState(false);
  //修改模态框
  const [isModal, setIsModal] = useState(false);
  //获取修改数据
  const [changeData, setChangeData] = useState();

  const { Option } = Select;
  const [state, setState] = useState([]);
  useEffect(() => {
    getGoodData();
  }, []);
  //获取商品分类数据
  const getGoodData = async () => {
    const res = await getGoods();
    // console.log('商品分类数据', res.data.rows);
    setState(res.data.rows.children);
  };
  //新增弹出模态框
  const addGoods = () => {
    setIsModalVisible(true);
  };
  //取消模态框
  const cancel = () => {
    setIsModalVisible(false);
  };
  //修改
  const changegoods = (tags) => {
    setIsModal(true);
    // console.log(tags);
    setChangeData(tags);
  };
  //取消修改模态框
  const changecancel = () => {
    setIsModal(false);
  };
  const dispatch = useDispatch();
  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: '操作',
      render: (tags) => (
        <>
          <Button onClick={() => changegoods(tags)}>修改</Button>
        </>
      ),
    },
  ];

  return (
    <div style={{ width: '100%', height: '100%' }}>
      <div style={{ height: '50px' }}>
        商品类型名称：
        <Input
          style={{ width: '200px', marginRight: '50px' }}
          placeholder="请输入商品名称"
        />
        状态：
        <Select style={{ width: '150px' }}>
          <Option value="启用">启用</Option>
          <Option value="停用">停用</Option>
        </Select>
      </div>
      <div style={{ width: '100%', height: '50px' }}>
        <Button style={{ marginRight: '20px' }} onClick={addGoods}>
          新增
        </Button>
        <Button>删除</Button>
      </div>
      <div style={{ width: '100%' }}>
        <Table
          pagination={{
            defaultCurrent: 1,
            defaultPageSize: 8,
            pageSizeOptions: [5, 8, 10],
            showSizeChanger: true,
          }}
          style={{ width: '1700px' }}
          columns={columns}
          dataSource={state}
        />
      </div>
      <AddGoodsType
        state={state}
        isModalVisible={isModalVisible}
        cancel={cancel}
      ></AddGoodsType>
      <ChangeGoods
        changeData={changeData}
        state={state}
        isModal={isModal}
        changecancel={changecancel}
      ></ChangeGoods>
    </div>
  );
}
